<template>
	<div>
		<van-button type="default">默认按钮</van-button>
		<van-button type="primary">主要按钮</van-button>
		<van-button type="info">信息按钮</van-button>
		<van-button type="warning">警告按钮</van-button>
		<van-button type="danger">危险按钮</van-button>
	</div>
</template>

<script>
	export default {
		/**
		 * 组件的状态
		 * 1. 为什么是函数？为什么new Vue里面data可以是一个对象？
		 * 2. 没有声明的属性是否可以被添加响应？
		 * 3. 属性名跟props重复之后，取这个属性取到的是data里的还是props里的？
		 * 4. 没有声明的属性如何添加响应（$set）？，已添加的属性删除后如何触发响应（$delete）？
		 * 5. 数组的部分方法（push,posh,unshift,shift,sort,revere,split）不会改变自身应用如何触发更新？
		 */
		data() {
			return {
				title: 'Hello'
			}
		},
		/**
		 * 上面是props声明的方式
		 * 下面是props校验和默认值的方式
		 * 1. props如何保证不被修改？
		 */
		props: ['list'],
		props: {
			list: {
				default: ()=>[],
				type: Array
			}
		},
		/**
		 * 计算属性
		 * 1. computed跟watch的区别？（异步，缓存，读和写等角度去回答）
		 * 2. computed怎么实现缓存效果？
		 */
		computed: {
			finishList(data){
				// return data.filter(item=>item.finished)
			}
		},
		watch: {
			// 1. 普通函数的方式
			list(newValue, oldValue){
				console.log('list...', list);
			},
			// 2. 对象的写法 
			list: {
				handle: (newValue, oldValue)=>{	// 处理函数

				},
				deep: true,	// 深度监听，比较耗性能，谨慎使用
				immediate: true	// 立即触发一次
			},
			// 3. 数组的方式，支持多个回调
			list: [()=>{}, ()=>{}],
			// 4. 字符串的写法，可以去实例里找对应的处理函数
			list: 'listWatch'
		},
		/**
		 * provider/inject 类似react的context通信，祖先到后代
		 * provider注入数据，inject消费数据
		 */
		provider: {

		},
		inject: {

		},
		/**
		 * mixin混入，类似react的HOC，增强组件的功能
		 * 混入属性时，跟组件属性重复，以组件为主
		 * 混入生命周期时，跟组件重复时都会触发，mixins混入的生命周期先触发
		 */
		mixins: {
			data: ()=>{
				return {
					title: 'mixin title'
				}
			},
			onLoad() {
				console.log('mixin onload title...', this.title);
			}
		},
		onLoad() {
			console.log('title...', this.title);
		},
		/**
		 * methods存储函数的地方
		 * 1. methods中的this指向谁？怎么做到的？
		 */
		methods: {
			listWatch(){
				console.log('list...', this.list);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
